<!DOCTYPE HTML>
<html lang="en-US">
	<head>
		<meta charset="UTF-8">
		<meta name="description" content="Zoom SlideShow - jQuery Plugin" />
		<meta name="keywords" content="vincent cibelli, vincidev, javascript, jquery, slideshow" />
		<meta name="author" content="Vincent CIBELLI" />
		<link rel="stylesheet" href="css/style.css" type="text/css" media="all" charset="utf-8"/>
		<title>Zoom SlideShow - jQuery Plugin</title>
	</head>
	<body>
		<div id="zoom"></div>
		<div id="wrapper">
			<div id="head">
				<h1>Zoom SlideShow - jQuery Plugin</h1>
			</div>
			<div id="content">
				<div id="view">
					<img src="media/img/nature1.jpg" alt="" />
				</div>
				<div id="thumbs">
					<div id="nav-left-thumbs"><</div>
					<div id="pics-thumbs">
						<img src="media/img/nature1.jpg" alt="Nature1" />
						<img src="media/img/nature2.png" alt="Nature2" />
						<img src="media/img/nature3.png" alt="Nature3" />
						<img src="media/img/nature4.png" alt="Nature4" />
						<img src="media/img/nature5.png" alt="Nature5" />
						<img src="media/img/nature1.jpg" alt="Nature1" />
						<img src="media/img/nature2.png" alt="Nature2" />
						<img src="media/img/nature3.png" alt="Nature3" />
						<img src="media/img/nature4.png" alt="Nature4" />
					</div>
					<div id="nav-right-thumbs">></div>
				</div>
			</div>
				
		</div>

		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script type="text/javascript" src="js/prefixfree.min.js"></script>
		<script type="text/javascript" src="js/zoom-slideshow.js"></script>
		<script>
			$(document).ready(function() {
				$('#view').setZoomPicture({
					thumbsContainer: '#pics-thumbs',
					prevContainer: '#nav-left-thumbs',
					nextContainer: '#nav-right-thumbs',
					zoomContainer: '#zoom',
					zoomLevel: 2,
					loadMsg: 'Chargement...'
				}); 
			});
		</script>
	</body>
</html>
